<template>
  <!-- //新增账号模态框 -->
  <a-modal v-model="powerVisible" title="权限配置" @ok="onSubmit" width="30%">
    <a-tabs default-active-key="1" @change="callback">
      <a-tab-pane key="1" tab="PC端">
        <a-tree
          v-model="checkedKeys"
          checkable
          :expanded-keys="expandedKeys"
          :auto-expand-parent="false"
          :tree-data="treeData"
          @expand="onExpand"
          @check="onCheck"
        />
      </a-tab-pane>
      <a-tab-pane key="2" tab="移动端" force-render>
        <a-tree
          v-model="checkedKeys"
          checkable
          :expanded-keys="expandedKeys"
          :auto-expand-parent="false"
          :tree-data="treeData"
          @expand="onExpand"
        />
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script>
const treeData = [
  {
    title: "0-0",
    key: "0-0",
    children: [
      {
        title: "0-0-0",
        key: "0-0-0",
        children: [
          { title: "0-0-0-0", key: "0-0-0-0" },
          { title: "0-0-0-1", key: "0-0-0-1" },
          { title: "0-0-0-2", key: "0-0-0-2" },
        ],
      },
      {
        title: "0-0-1",
        key: "0-0-1",
        children: [
          { title: "0-0-1-0", key: "0-0-1-0" },
          { title: "0-0-1-1", key: "0-0-1-1" },
          { title: "0-0-1-2", key: "0-0-1-2" },
        ],
      },
      {
        title: "0-0-2",
        key: "0-0-2",
      },
    ],
  },
  {
    title: "0-1",
    key: "0-1",
    children: [
      { title: "0-1-0-0", key: "0-1-0-0" },
      { title: "0-1-0-1", key: "0-1-0-1" },
      { title: "0-1-0-2", key: "0-1-0-2" },
    ],
  },
  {
    title: "0-2",
    key: "0-2",
  },
];
export default {
  beforeDestroy() {
    this.$bus.$off("PowerManagement");
  },
  mounted() {
    this.$bus.$on("PowerManagement", (rowData) => {
      console.log(rowData);
      this.powerVisible = true;
    });
  },
  data() {
    return {
      powerVisible: false,

      //选中打开的树
      expandedKeys: [],
      //   选中的树
      checkedKeys: [],
      treeData,
    };
  },
  methods: {
    //切换状态框
    callback(key) {
      console.log(key);
    },
    onSubmit() {
      console.log("提交按钮");
    },
    // 树形打开
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
    },
    // 树形选中
    onCheck(checkedKeys, info) {
      console.log("onCheck", checkedKeys, info);
      this.checkedKeys = checkedKeys;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.ant-modal-body {
  padding: 0 !important;
}
.ant-tabs .ant-tabs-top-content > .ant-tabs-tabpane,
.ant-tabs .ant-tabs-bottom-content > .ant-tabs-tabpane {
  padding: 20px;
}
</style>